<template>
  <div class="inside-page">
    <div class="collection content">
      <p class="detail-title">收藏的职位</p>
      <Pos-Job :list="jobList" />
      <client-only>
        <el-pagination hide-on-single-page
          background
          prev-text="上一页"
          next-text="下一页"
          layout="prev, pager, next"
          :current-page="pageNo"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </client-only>
    </div>
  </div>
</template>

<script>
import { userCollect } from '@/api/users';
export default {
  asyncData ({ params, store, error }) {
  },
  components: {},
  data () {
    return {
      total: 0,
      pageNo: 1,
      pageSize: 15,
      jobList: [],
    }
  },
  head () {
    return {
      titleTemplate: (titleChunk) => {
        return `${titleChunk} - 大学生找工作、找实习`;
      }
    }
  },
  created () {
  },
  mounted () {
    this.$nextTick(() => {
      const userId = this.$store.state.user.authUser.id || '';
      userId && this.fetchData(userId);
    })
  },
  watch: {

  },
  computed: {

  },
  methods: {
    handleCurrentChange (val) {
      this.pageNo = val;
      this.fetchData();
    },
    jumpTo (obj) {
      this.$router.push({
        path: '/job/detail',
        query: { id: obj.id }
      })
    },
    async fetchData (userId) {
      await userCollect({
        uid: userId || this.$store.state.user.authUser.id,
        page: this.pageNo
      }).then(res => {
        if (res.code === 200) {
          this.total = res.data.count;
          this.jobList = res.data.list;
        } else {
          this.$message.error(res.msg || '网络错误, 稍后再试！');
        }
      }).catch(err => {
        this.$message.error(err || '网络错误, 稍后再试！');
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.inside-page {
  width: 100%;
  position: relative;
  .collection {
    padding-bottom: 60px;
  }
}
</style>
